<template>
  <div class="order">
    <div v-for="(item, index) in orders" :key="index" @click.stop="toOrderDesc(item)" class="order_item">
      <orders :countShow="true"  :info="item"></orders>
      <un-pay-handle v-show="item.pay_status==1" :time="item.time" :orderNo="item.order_no" :itemInfo="item" @cancel="refresh" 
      @pay="pay"></un-pay-handle>
      <paid v-show="item.express_number.length!=0" :express="item.express" :expressNumber="item.express_number"></paid>
    </div>
    <div class="emptyCon" v-show="isNone">
      <img src="@/assets/none.png" alt="">
    </div>
    <p class="noneText" v-show="isNone">您还没有在宏香馨下过订单哦</p>
    <shade v-show="loadShow"/>
  </div>
</template>

<script>
import orders from "./orders.vue";
import unPayHandle from "./components/unPayHandle";
import paid from "./components/paid";
import { getOrders, isLogin, OrderPay_wxh5, getOrderInfo } from "@/api/index.js";
import { getTeaSamplesInfo } from "@/api/chayang.js"
import wx from "weixin-js-sdk";
import configWxPayApi from "@/utils/configWxPayApi.js";
import payByWx from "@/utils/payByWx.js";
export default {
  data() {
    return {
      loadShow: true,
      orders: [],
      isNone: false,
      openid: ""
    };
  },
  created() {
    this.$store.commit("SETPAGEINFO", {
      title: "我的订单列表",
      description: ""
    });
    getOrders("").then(result => {
      this.loadShow = false;
      result.data.forEach(item => {
        if (item.order_status != "c") {
          this.orders.push(item);
        }
      });
      if (this.orders.length == 0) {
        this.isNone = true;
      }
    });
    configWxPayApi();
    wx.ready(() => {});
    wx.error(function(res) {
      // alert(res);
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });
    isLogin().then(result => {
      if (this.$store.state.loginType == "h5") {
        if (result.data.uid.length == 0) {
          this.$router.push({
            name: "登录"
          });
        }
      }
    });
  },
  props: ["countShow"],
  components: {
    orders,
    unPayHandle,
    paid
  },
  methods: {
    toOrderDesc(item) {
      this.$router.push({
        name: "订单详情",
        params: {
          info: item
        }
      });
    },
    pay(data) {
      // 发起支付前，如果有限量，先查询限额是否已满
      getOrderInfo(data.order_no).then(result => {
        // if (result.data.root_menu_id == "16") {
        getTeaSamplesInfo(result.data.good_id).then(res => {
          if (res.data.buy_number >= res.data.buy_limit_number_everyday) {
            this.$messagebox.alert("对不起，今日名额已满，明天早点来哦");
            return false;
          } else {
            if (this.$store.state.loginType == "h5") {
              OrderPay_wxh5(data.order_no).then(results => {
                const rdirectUrl =
                  "http://www.chamiw.com/App/dist/#/paySuccess/" +
                  data.order_no;
                location.href =
                  decodeURIComponent(results.data.mweb_url) +
                  "&redirect_url=" +
                  encodeURIComponent(rdirectUrl);
              });
            } else {
              payByWx(
                data.order_no,
                this.$store.state.openid,
                data.addrInfo,
                data.totalPrice,
                this
              );
            }
          }
        });
        // }
      });
    },
    refresh() {
      getOrders("").then(result => {
        this.orders = [];
        result.data.forEach(item => {
          if (item.order_status != "c") {
            this.orders.push(item);
          }
        });
        console.log(this.orders);
        if (this.orders.length == 0) {
          this.isNone = true;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.order_item {
  margin-bottom: to(18);
}
.emptyCon {
  margin: 0 auto;
  width: to(550);
  background-color: #fff;
  height: to(550);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: to(3) solid #ccc;
  img {
    position: absolute;
    width: to(531);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.noneText {
  font-size: to(30);
  text-align: center;
  line-height: to(180);
}
</style>
